
<style lang="scss" scoped>
    @import '../../../scss/app.scss';

    .searchBox {
        @include flexRow;

        input[type=text] {
            width: 200px;
            transition: width 1s;
        }
        input[type=text]:focus {
            width: 300px;
        }

        input[type=button] {
            box-shadow: #555 1px 0px 3px;
        }
        input[type=button]:focus {
            width: 400px;
        }
    }
    .searchBox:focus {
        input[type=text] {
            width: 300px;
        }        
    }
</style>

<template>
    <div class='searchBox'>
        <input type='text' placeholder='请输入搜索内容' />
        <input type='button' value='搜索' />
    </div>
</template>

<script>
    export default {
        name: 'searchBox',
        data () {
        },
    };
</script>
